<template>
    <div class="order">
        <Position :navList="navList"/>
        <div class="title">
            <div class="item">
                <el-input placeholder="请输入机器串号" v-model="machine_code" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>
        </div>
        <div class="cont">
            <el-table :data="tableData" style="width: 100%" v-loading='loading'>
                <el-table-column prop="machine_id" label="ID"></el-table-column>
                <el-table-column prop="machine_code" label="机器串号"></el-table-column>
                <el-table-column prop="machine_title" label="机器名称"></el-table-column>
                <el-table-column prop="machine_address" label="投放地点"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        {{scope.row.machine_state ==1?'服务中':scope.row.machine_state ==2?'已禁用':scope.row.machine_state ==3?'缺货':'已删除'}}
                        ({{scope.row.start>120?'离线':'在线'}})
                    </template>
                </el-table-column>

            </el-table>
            
            <div class="page">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100]"
                :page-size="size"
                :current-page='page'
                layout="sizes, prev, pager, next"
                :total="total"></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import Position from '../components/position.vue'
    export default {
        components:{
            Position
        },
        data() {
            return {
                loading:false,
                machine_code:null,//搜索imei
                tableData:[],
                total:0,//总条目数
                size:10,//当前页面数据数量
                page:1,//页码
                
                navList:[{
                    name:'机器管理',
                    url:'/myequipments'
                    },{
                    name:'我的设备',
                    url:''
                }]
            };
        },
        mounted(){
            this.getList()
        },
        methods:{
            //获取列表
            async getList(){
                let start = null
                let end = null
                if (this.date) {
                    start = this.date[0]
                    end = this.date[1]
                }
                this.loading = true
                let {data:{code,data}} = await this.$http.get(this.$api.machinel,{
                    start_at:start,
                    end_at:end,
                    machine_code:this.machine_code,
                    size:this.size,
                    page:this.page
                })
                this.loading = false
                console.log(new Date().getTime())
                data.items.forEach(item => {
                    return item.start = new Date().getTime()/1000-parseFloat(item.machine_heart_time)
                });
                this.tableData = data.items
                this.total = parseInt(data.pages.totalCount)
                console.log('订单列表',data)
            },
            //搜索
            search(){
                console.log('搜索')
                this.page = 1
                this.size = 10
                this.getList()
            },
            //页面展示数据数量变化时
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.size = val
                this.page = 1
                this.getList()
            },
            //翻页时
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val
                this.getList()
            }
        }
    };
</script>
<style lang="scss" scoped>
    .order{
        .title{
            
            padding: 15px;
            background-color: #fff;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            .item{
                display: flex;
                .key{
                    width: 100px;
                    font-size: 14px;
                    line-height: 30px;
                    text-align: center;
                }
            }
        }
        .cont{
            padding: 5px;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            background-color: #fff;
            .btn{
                margin: 10px 0;
                text-align: left;
            }
        }
        
        
    }
    
</style>